<template>
  <vue-markdown-it class="markdown-body" :source="content" :anchor="anchorOptions" :toc="tocOptions"
                   :html="true"/>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'
import VueMarkdownIt from 'vue3-markdown-it'

export default defineComponent({
  props: {
    content: {
      type: String,
      required: true
    }
  },
  setup () {
    // 所有锚点的类名
    const anchorClass = 'blog-anchor'
    // 生成目录时目录所在元素的ID
    const tocContainerId = 'markdown_it_toc'

    const state = reactive({
      anchorOptions: {
        // permalink: true,
        // permalinkSymbol: '🐋',
        // permalinkBefore: true,
        permalinkClass: anchorClass
      },
      tocOptions: {
        containerId: tocContainerId,
        linkClass: anchorClass,
        listType: 'ul'
      }
    })

    return {
      ...toRefs(state)
    }
  },
  components: {
    VueMarkdownIt
  }
})
</script>

<style lang="less">
.markdown-body {
  width: 100%;
  height: 100%;
  word-wrap: break-word;

  & iframe {
    width: 100%;
    height: 600px;
  }
}
</style>
